<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<style>
    #resNoRead {
        background-color: #d15b47 !important;
        margin: 10px 3px;
        color: #fff;
        position: absolute;
        top: -15px;
        right: -17px;
    }

    #superNoRead {
        background-color: #d15b47 !important;
        margin: 10px 3px;
        color: #fff;
        position: absolute;
        top: -15px;
        right: -17px;
    }
</style>
<%--流程图表--%>
<div id="flowChart" style="width: 860px;height: 400px;margin:30px 0;"></div>
<form:form commandName="taskJob" cssClass="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName">任务名称</label>
        <div class="col-sm-4">
            <input type="text" name="taskName" id="taskName" placeholder="任务名称" value="${taskJob.taskName}"
                   class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskContent">任务内容</label>
        <div class="col-sm-10">
            <textarea rows="1" id="taskContent" name="taskContent"
                      class="form-control">${taskJob.taskContent}</textarea>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskDate">任务时间</label>
        <div class="col-sm-4">
            <input type="number" name="taskDate" id="taskDate" placeholder="(天数)" value="${taskJob.taskDate}"
                   class="form-control"/>
        </div>

        <label class="col-sm-2 control-label no-padding-right" for="responseTime">响应时间</label>
        <div class="col-sm-4">
            <input type="text" name="taskDate" id="responseTime" placeholder="点击选择" value="${taskJob.responseTime}"
                   class="form-control date-picker" readonly/>
        </div>
    </div>




    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="planStartDate">计划开始时间</label>
        <div class="col-sm-4">
            <input type="text" name="planStartDate" id="planStartDate" value="${taskJob.planStartDate}"
                   placeholder="点击选择(默认当前时间)" class="form-control date-picker" readonly/>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="planEndDate">计划结束时间</label>
        <div class="col-sm-4">
            <input type="text" name="planEndDate" id="planEndDate" value="${taskJob.planEndDate}"
                   placeholder="点击选择(默认当前时间)" class="form-control date-picker" readonly/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="startDate">开始时间</label>
        <div class="col-sm-4">
            <input type="text" name="startDate" id="startDate" value="${taskJob.startDate}"
                   placeholder="点击选择(默认当前时间)" class="form-control date-picker" readonly/>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="endDate">结束时间</label>
        <div class="col-sm-4">
            <input type="text" name="endDate" id="endDate" value="${taskJob.endDate}"
                   placeholder="点击选择" class="form-control date-picker" readonly/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right formsHead" >督查组信息：</label>
        <div class="col-sm-4"></div>
        <label class="col-sm-2 control-label no-padding-right formsHead" >责任单位信息：</label>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="groupCode_edit">督查组</label>
        <div class="col-sm-4">
            <select name="groupCode" id="groupCode_edit" class="form-control <%--departments--%>" <%--multiple="multiple"--%>>
                <%--<optgroup label="">
                    <c:forEach items="${supervisionList}" var="supervisionList">
                        <option value="${supervisionList.sysId}">${supervisionList.deptName}</option>
                    </c:forEach>
                </optgroup>--%>
                <c:forEach items="${supervisionList }" var="supervisionList">
                    <option value="${supervisionList.sysId}">${supervisionList.deptName}</option>
                </c:forEach>
            </select>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="deptId_edit">责任单位</label>
        <div class="col-sm-4">
            <select name="deptId" id="deptId_edit" class="form-control">
                    <%--<optgroup label="">
                        <c:forEach items="${resDepts}" var="resDepts">
                            <option value="${resDepts.sysId}">${resDept.deptName}</option>
                        </c:forEach>
                    </optgroup>--%>
                <c:forEach items="${resDepts }" var="resDepts">
                    <option value="${resDepts.sysId}">${resDepts.deptName}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="inspectors_edit">督查组成员</label>
        <div class="col-sm-4">
            <input type="text" name="inspectors" id="inspectors_edit" placeholder="请输入姓名" value="${taskJob.inspectors}"
                   class="form-control " readonly/>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="resUser_edit">责任人</label>
        <div class="col-sm-4">
            <input type="text" name="resUser" id="resUser_edit" placeholder="责任人" value="${taskJob.resUser}"
                   class="form-control " readonly>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="phones_edit">督查组手机号</label>
        <div class="col-sm-4">
            <input type="text" name="phones" id="phones_edit" placeholder="手机号" value="${taskJob.phones}"
                   class="form-control " readonly/>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="resPhone_edit">责任人手机号</label>
        <div class="col-sm-4">
            <input type="text" name="resPhone" id="resPhone_edit" placeholder="责任人手机号" value="${taskJob.resPhone}"
                   class="form-control " readonly/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" >督查单位得分</label>
        <div class="col-sm-4">
            <input type="text" name="supervisionScore" id="supervisionScore" value="${taskJob.supervisionScore}"
                   class="form-control" readonly>
        </div>
        <label class="col-sm-2 control-label no-padding-right" >责任单位得分</label>
        <div class="col-sm-4">
            <input type="text" name="respScore" id="respScore" value="${taskJob.respScore}"
                   class="form-control" readonly>
        </div>
    </div>

    <%--<div class="form-group">--%>
        <%--<label class="col-sm-2 control-label no-padding-right" >督办要求列表</label>--%>
        <%--<div class="col-sm-4">--%>
            <%--<button class="btn btn-md btn-info" id="supervisionAskList">督查详情--%>
                <%--<span id="resNoRead" class="badge pull-right reds">!</span>--%>
            <%--</button>--%>
        <%--</div>--%>
        <%--<label class="col-sm-2 control-label no-padding-right" >反馈信息列表</label>--%>
        <%--<div class="col-sm-4">--%>
            <%--<button class="btn btn-md btn-info" id="feedbackInfoList">反馈详情--%>
                <%--<span id="superNoRead" class="badge pull-right reds">!</span>--%>
            <%--</button>--%>
        <%--</div>--%>
    <%--</div>--%>
    <%--任务id  隐藏--%>
    <input type="text" id="taskId" value="${taskJob.sysId}" hidden>
    <form:hidden path="sysId"/>
</form:form>
<%--//流程图--%>
<script src="<s:url value="/assets/js/echarts/echarts.min.js"></s:url>"></script>
<%--流程图表--%>
<script>
    /**
     *
     * @param p
     */
    function flowChart(p) {
        var datas = [{
            name: '任务生成',
            x: 0,
            y: 0
        }, {
            name: '任务开始',
            x: 50,
            y: 0
        }, {
            name: '任务执行中',
            x: 100,
            y: 0
        }, {
            name: '任务完成',
            x: 150,
            y: 20
        }, {
            name: '任务未完成',
            x: 150,
            y: -20
        }, {
            name: '反馈攻坚',
            x: 200,
            y: -50
        }, {
            name: '完成情况',
            x: 120,
            y: 30
        }, {
            name: '督查记录',
            x: 80,
            y: 30
        }, {
            name: '督查组需协调事项',
            x: 80,
            y: 60
        }, {
            name: '责任单位需协调事项',
            x: 120,
            y: 60
        }, {
            name: '督查得分',
            x: 230,
            y: 20
        }];

        var links = p.graph;
        //任务进行到某步球体变为绿色   1 = 蓝色   0 = 绿色
        var arr = p.green;
        for (var i = 0; i < datas.length; i++) {
            datas[i].category = arr[i];
        }
        var option = {
            // tooltip: {
            // },
            grid: {
                bottom: "5%",
                top: "5%"
            },
            //数据更新动画的时长。
            animationDurationUpdate: 1500,
            //数据更新动画的缓动效果。
            animationEasingUpdate: 'quinticInOut',
            color: "#2EABFF",
            series: [{
                animationDuration: 6000,
                type: 'graph',
                categories: [{
                    name: '',
                    itemStyle: {
                        normal: {
                            color: "#009800",
                        }
                    }
                }],
                layout: 'none',
                //节点大小
                symbolSize: [60, 60],
                //roam: true,
                //节点文字是否显示
                label: {
                    normal: {
                        show: true,
                    }
                },
                //指向箭头
                edgeSymbol: ['circle', 'arrow'],
                //edgeSymbolSize: [1, 10],
                //连接线文字大小
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                data: datas,
                links: links,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }]
        };
        var myChart = echarts.init(document.getElementById('flowChart'));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    var taskId = $("#taskId").val();//任务id
    $.ajax({
        url: "/jobmanages/getTaskNodes",
        type: "POST",
        dataType: "json", //返回数据形式为json
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify({"sysId": taskId}),
        success: function (res) {
            if (res.code == "200") {
                var item = res.data;
                flowChart(item);
            }
        }
    });

    /**
     * 时间选择器
     * @param el 元素
     */
    jQuery(function ($) {
        $(".date-picker").datepicker({
            inline: true,
            format: "yyyymmdd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

        //涉及部门
        $(".departments").change(function () {
            console.log($(".demo option:selected").text());
        });
        $(".departments").fSelect();

        //责任单位
        var deptIdSelected = '${taskJob.deptId}';
        //jq选中select
        $("#deptId_edit option[value = '"+deptIdSelected+"']").attr("selected",true);

        $("#deptId_edit").change(function () {
            var deptId = $("#deptId_edit").val();
            $.ajax({
                url: "/jobmanages/queryResUserByDeptId",
                type: "GET",
                dataType: "json", //返回数据形式为json
                contentType: 'application/json;charset=UTF-8',
                async: true,
                data: {"deptId": deptId},
                success: function (res) {
                    if(res != null){
                        $("#resUser_edit").val(res.name);
                        $("#resPhone_edit").val(res.mobile);
                    }
                }
            });
        });

        $("#groupCode_edit").change(function () {
            var groupCode = $("#groupCode_edit").val();
            $.ajax({
                url: "/jobmanages/querySupervisionUserByDeptId",
                type: "GET",
                dataType: "json", //返回数据形式为json
                contentType: 'application/json;charset=UTF-8',
                async: true,
                data: {"deptId": groupCode},
                success: function (res) {
                    if(res != null){
                        $("#inspectors_edit").val(res.name);
                        $("#phones_edit").val(res.mobile);
                    }
                }
            });
        });

        //督查组
        var groupCodeSelected = '${taskJob.groupCode}';
        //jq选中select
        $("#groupCode_edit option[value = '"+groupCodeSelected+"']").attr("selected",true);
    });

    // /**
    //  * 督查要求列表
    //  */
    // $("#supervisionAskList").click(function () {
    //     var taskId = $('#taskId').val();
    //     loadDialog({
    //         dialogTitle: '督查要求列表',
    //         dialogUrl: baseUrl + "supervisionAskList/" + taskId,
    //         // dialogUrl: getUrl("supervisionAskList"+ taskId),
    //         dialogFoot: '<button type="button" class="btn btn-default" data-dismiss="modal" id="showDetail" onclick="myClose()">关闭</button>'
    //     });
    // });
    //
    // /**
    //  * 反馈信息要求列表
    //  */
    // $("#feedbackInfoList").click(function () {
    //     var taskId = $('#taskId').val();
    //     showEditDialog({
    //         dialogTitle: '反馈信息列表',
    //         dialogUrl: baseUrl + "feedbackInfoList",
    //         // dialogUrl: getUrl("feedbackInfoList"+ taskId),
    //         dialogFoot: '<button type="button" class="btn btn-default" data-dismiss="modal" id="showDetail" onclick="myClose()">关闭</button>'
    //     });
    // });

</script>
